<template>
	<view class="coupons">
		<view>
			<view class="tabs">
				
				<view class="lan_box">
					<view @click="lanId(item)" :class="['infos',cateCheck==item.id?'check':'']" v-for="(item,index) in cate" :key="index">
						{{item.name}}
					</view>
				</view>
				
				<view class="tab_box">
					
					<u-tabs activeColor="#FF3333" :list="tabList" :bold="true" :is-scroll="false" :current="current" @change="change"></u-tabs>
					
				</view>
				
			</view>
			<view style="height: 162rpx;"></view>
			<view v-if="total!=0">
				<view v-for="(item,index) in list" :key="index" class="sign-coupons">
					<view class="info">
						<image src="/static/img/coupons_red.png" v-if="type==1"></image>
						<image src="/static/img/coupons_gray.png" v-else></image>
						<text v-if="item.money>0">￥{{item.money}}</text>
						<text v-if="item.goods">{{item.goods.name}}</text>
						<text class="i_msg" v-if="item.info.satisfy_money>0">满{{item.info.satisfy_money}}元可用</text>
					</view>
					<view class="flex flex-left-right flex-full name">
						<view class="flex-column">
							<text class="fs-16 bold">{{item.info.name}}</text>
							<text class="fs-12 gray_font" style="margin-top: 20rpx;" v-if="item.info.use_timedata==2&&item.info.use_time_info">
								{{item.info.use_time_info.start_time.substring(0,10)}}至{{item.info.use_time_info.end_time.substring(0,10)}}</text>
							<text class="fs-12 gray_font" style="margin-top: 20rpx;" v-if="item.info.use_timedata==1&&item.info.use_time_info">
							{{$fomartDate(item.be_time).substring(0,10)}}之前使用有效
							</text>
						</view>
						<view class="status">
							<text @click="use(item)" v-if="type==1">立刻使用</text>
							<text v-else class="no-use">{{type==2?'已使用':'已过期'}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-j-c flex-column align_center" v-else style="padding-top: 10vh;">
				<image :src="none" class="no-bitmap" mode="aspectFit" />
				<text class="fs-13 gray_font">暂时还没有优惠券哦~</text>
			</view>
		</view>
		<view style="padding-bottom: calc(env(safe-area-inset-bottom) + 98rpx)"></view>
		<view class="my-coupons">
			<view @click="morePage">去领券中心</view>
		</view>
		
		
		<u-popup :closeable="true" v-model="rwmShow" mode="center" border-radius="14">
			<view class="dj_box">
				  <canvas v-if="rwmShow" canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import uQRCode from '@/static/js/uqrcode.js';
	export default {
		data() {
			return {
				cate:[],
				cateCheck:'',
				current:0,
				tabList: [{
						name: '未使用',
						id: 1
					},
					{
						name: '已使用',
						id: 2
					},
					{
						name: '已过期',
						id: 3
					},
				],
				leftPx: '20rpx',
				page: 1,
				list: [],
				type: 1,
				totalPrice: '',
				total:0,
				none:'',
				banner:'',
				rwmShow:false,
				qrcodeSize: 150,
			}
		},
		onLoad(e) {
			this.none=this.$imgUrl+'assets/img/none_coupon.png';
			this.totalPrice = e.totalPrice;
			//this.getBanner();
			this.getList();
			this.getCate();
		},
		methods: {
			setCode(e){
				
				console.log(e);
				this.rwmShow=true;
				uQRCode.make({
					canvasId: 'qrcode',
					text:this.$imgUrl+'?id='+e.id,
					size: this.qrcodeSize,
					margin: 10,
					success: res => {
						this.src = res
						
					}
				})
			},
			change(e){
				this.current = e;	
				this.type=this.tabList[e].id;
				this.getList();
			},
			lanId(e){
				if(this.cateCheck==e.id) return;
			     this.cateCheck=e.id;
				 this.getList();   
			},
			getCate(){
			  this.$get(this.$api.couponCate,{},res=>{
				  let data=res.data;
				  if(data.code==1){
					  
					  data.data.unshift({id:'',name:'全部'});
					  
					   this.cate=data.data;
					   
					   if(data.data.length>0){
						    // this.cateCheck=data.data[0].id;
					   }
					   
				  }
			  });	
			},
			use(item) {
				
				if(item.cate_id==8){
					this.setCode(item);
				}else{
					uni.navigateTo({
						url:"/pages/tabar/shop"
					})
				}
				   
			},
			moveLeft(index) {
				this.leftPx = 20 + index * 300 + 'rpx';
				this.type = index + parseInt(1);
				this.list = [];
				this.page=1;
				this.getList();
			},
			morePage() {
				uni.navigateTo({
					url: 'index'
				})
			},
			getList() {
				let params = {
					page: 1,
					limit: 10,
					cate_id:this.cateCheck,
					type: this.type
				};
				this.$get(this.$api.cMy, params, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						data.data.data.forEach((item) => {

							let date = (new Date() - 0) / 1000;
							if (date < item.info.receive_endtime && date > item.info.receive_starttime) {
								item.info.is_start = true;
							}

						})
						this.list =data.data.data;
						this.total=data.data.total;
					}
				})
			}
		},
		
		onReachBottom() {
			
			if (this.list.length < this.total) {
				this.page++;
				
				let params = {
					page: this.page,
					limit: 10,
					cate_id:this.cateCheck,
					type: this.type
				};
				
				
				this.$get(this.$api.cMy,params, res => {
					let data = res.data;
					data.data.data.forEach(ress => {
						this.list.push(ress);
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.dj_box{
		box-sizing: border-box;
		padding: 60rpx 20rpx 20rpx 20rpx;
	}
	
	/deep/ .u-tab-item {
		background-color: transparent !important;
		font-size: 28rpx !important;
	}
	
	.tab_box{
		box-sizing: border-box;
		padding: 0 30rpx;
	}
	
	.coupons {
		.tabs {
			background: white;
			box-sizing: border-box;
			padding: 0 0rpx;
			height: 162rpx;
			position: fixed;
			top:0;
			z-index:99;
			width: 100%;

			.sign {
				display: flex;
				justify-content: space-between;
				line-height: 80rpx;
			}
			
		}

		.move-border {
			top: 154rpx;
			position: absolute;
			width: 40rpx;
			background: #FF3333;
			height: 4px;
			transition: 1s;
			border-radius: 3rpx;
		}

		.no-bitmap {
			width: 377rpx;
		}

		.my-coupons {

			position: fixed;

			z-index: 9;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);
			background: white;
			height: 98rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			view {
				width: 690rpx;
				background: #FF3333;
				border-radius: 35rpx;
				color: white;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
			}
		}
	}

	.coupons .sign-coupons {
		margin: 30rpx;
		height: 200rpx;
		background-color: white;
		border-radius: 10rpx 4rpx 4rpx 4rpx;
		display: flex;

		.info {
			width: 204rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 204rpx;
				height: 200rpx;
				position: absolute;
			}

            .i_msg{
				font-size: 24rpx;
				margin-top: 10rpx;
			}

			text {
				position: relative;
				z-index: 4;
				font-size: 40rpx;
				color: white;

			
			}
		}

		.name {
			padding: 0 30rpx;
		}

		.status  {
			text{
			display: inline-block;
			width: 120rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			color: white;
			border-radius: 20rpx;
			background: linear-gradient(to left, #FF7A7A, #FF3333);
			font-size: 22rpx;}
			.no-use{
					background:#999;
			}
		}
	}
	
	.lan_box{
		display: flex;
		align-items: center;
	}
	.infos{
		flex: 1;
		text-align: center;
		box-sizing: border-box;
		background-color: #EEEEEE;
		padding: 20rpx 0;
	    border-right: 1rpx solid #eee;
		border-bottom: 1rpx solid #eee;
	}
	
	.check{
		background-color: #FF3333;
		color: white;
	}
	
	
	
	
</style>
